<template>
  <el-dialog :title="title" width="85%" :visible.sync="visible" destroy-on-close @close="closeClick">
    <el-form :inline="true" :model="recordInfo.queryForm" class="demo-form-inline">
      <el-row>
        <el-col>
          <el-form-item label="小组名称">
            <el-input v-model="recordInfo.queryForm.groupName" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getRecordList">搜索</el-button>
          </el-form-item>
          <el-form-item v-if="false === singleSelect">
            <el-button type="primary" @click="handleAdd()">添加</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      ref="multipleTable"
      key="index"
      v-loading="recordInfo.loading"
      class="table-default"
      :data="recordInfo.list"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="false === singleSelect" type="selection" width="43" align="center" />
      <el-table-column v-if="true === singleSelect" label="选择" width="49" align="center">
        <template v-slot="scope">
          <div class="list-operate-menu">
            <i class="el-icon-success check-button" @click="confirmSelect(scope.row)" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="groupName" label="小组名称" align="center" />
      <el-table-column prop="leaderUserName" label="组长" width="200" align="center" />
    </el-table>
    <pagination
      v-show="recordInfo.total > 0"
      :total="recordInfo.total"
      :page.sync="recordInfo.queryForm.page"
      :limit.sync="recordInfo.queryForm.pageSize"
      @pagination="getRecordList"
    />
  </el-dialog>
</template>

<script>
import ListMixin from '@/mixins/modules/list'
import filters from '@/filters/index'
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },
  filters: { ...filters },
  mixins: [ListMixin],
  props: [],
  data() {
    return {
      title: '选择盘点小组',
      visible: false,
      singleSelect: false,
      searchOrganizationLoading: false,
      organizationList: [],
      recordInfo: {
        queryForm: {
          returnUserDetail: true,
          page: 1,
          pageSize: 5,
          returnCount: true,
          stocktakeTaskId: 0,
          stocktakeTaskIdNotIsEmpty: false,
          groupName: ''
        },
        requestUrl: this.$api.getStocktakeGroupList,
        loading: false,
        list: [],
        total: 0
      },
      beforeRequest() {
      },
      callbackFunc: null,
      autoGetList: false,
      multipleSelection: []
    }
  },
  computed: {},
  methods: {
    init(callback, option) {
      this.multipleSelection = []
      this.callbackFunc = callback
      this.visible = true
      this.recordInfo.queryForm.groupName = ''
      this.recordInfo.total = 0
      this.recordInfo.list = []
      if (undefined !== option && undefined !== option.singleSelect) {
        this.singleSelect = option.singleSelect
      } else {
        this.singleSelect = false
      }
      this.getRecordList(true)
    },
    confirmSelect(item) {
      this.visible = false
      if (this.callbackFunc) {
        this.callbackFunc([item])
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleAdd() {
      if (this.multipleSelection.length === 0) {
        this.$commonUtils.showWarningToast('请勾选要添加的项')
        return
      }
      this.visible = false
      if (this.callbackFunc) {
        this.callbackFunc(this.multipleSelection)
      }
    },
    closeClick() {
      this.recordInfo.queryForm.page = 1
    }
  }
}
</script>

<style lang="scss" scoped>
.check-button {
  font-size: 20px !important;

  &:hover {
    color: #3a8ee6;
  }
}
</style>
